<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{padding:0px;list-style-type: none;width:500px;background-color: rgb(216, 212, 212);display: none;}
    li{padding:5px;}
    li > a{text-decoration: none;font-size: 24px;font-family: 宋体;padding-left: 20px;}
    li > a:link{color:black;}
    li:first-child{background-image: linear-gradient(to right, #3cb331, #2bd81b, #3cb331);background-color: #3cb331;}
    li:first-child > a { color:white;}
    li:first-child:hover{
        opacity: 0.7;
    }
    li:not(:first-child):hover{
        background-color: rgba(96, 85, 85, 0.342);
    }
    span{display: block;position: sticky;top:50%;left:0px;width:70px;height: auto;background-color: #2bd81b;}
    /* span:hover{
       animation: mydonghua  5s;
    }

    @keyframes mydonghua{
        0% {display: none;}
        100% {display:block}
    } */
</style>
<body>
   
    <ul id="st">
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
      <span onmouseover="pop(this)" onmouseout="hide1()">我是功能</span>

      <script>
        //event 鼠标或者键盘  event.x鼠标X 作标
        function pop(t){
            
            let st = document.getElementById("st");
            st.style.display = "block";
            st.style.position = "absolute";
            st.style.left = (t.offsetLeft + t.clientWidth) +"px";
            st.style.top = event.y +"px";
        }

        function hide1(){
            let st = document.getElementById("st");
            st.style.display = "none";
        }
      </script>
</body>
</html>